<!DOCTYPE html>
<html>
    <head>
        <title>csv2geojson</title>
        <link rel='stylesheet' type='text/css' href='site/site.css' />
        <script src='http://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.js'></script>
        <link href='http://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.css' rel='stylesheet' />
        <!--[if lte IE 8]>
          <link href='http://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.ie.css' rel='stylesheet' >
        <![endif]-->
    </head>
    <body dropzone="copy">
        <h2>is that a csv you've got there? want a <a href='http://geojson.org/'>geojson</a>?</h2>
        <div id='map'></div>
        <div id='manual'>
          <p>
          Couldn't find the names of your latitude and longitude columns. Mind to specify them manually?
          </p>
        <label for='lon'>Longitude</label>
        <select name='lon' id='lon'></select>
        <label for='lat'>Latitude</label>
        <select name='lat' id='lat'></select>
        <a id='close' href='#'>&times;</a>
        </div>

        <textarea placeholder='copy and paste your csv file here. you have grown attached to it. do not worry - it will still be available on your computer, and likely in some kind of excel 1987 format too.' id='input'></textarea>
        <!-- ha! a center element -->
        <center><button data-type='point' class='go'>do it</button>
            <button data-type='line' class='go'>do it (as lines)</button>
            <button data-type='polygon' class='go'>do it (as polygons)</button>
        </center>
        <textarea placeholder='your output will automagically appear here, and you will be filled with a sense of relief and accomplishment and yet at the same time yearn for the log cabin life. your dog would like to go to a log cabin too. so go, dog, go.' id='output'></textarea>
        <div id='dragdrop-enabled'>nice browser you got there! you can even drag &amp; drop a csv file onto this page!</div>
        <p class='os'><a href='http://mapbox.github.io/togeojson/'>got a KML or GPX file instead? Try toGeoJSON</a></p>
        <p class='os'><a href='https://github.com/tmcw/csv2geojson'>this is open source and you can run it from a command line</a></p>
        <div id='overlay'><span>drop it!</span></div>

        <script src='csv2geojson.js'></script>
        <script src='site/jquery.js'></script>
        <script src='site/site.js'></script>

        <script type="text/javascript">
          var _gauges = _gauges || [];
          (function() {
            var t   = document.createElement('script');
            t.type  = 'text/javascript';
            t.async = true;
            t.id    = 'gauges-tracker';
            t.setAttribute('data-site-id', '4e36eb1ef5a1f53d6f000001');
            t.src = '//secure.gaug.es/track.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(t, s);
          })();
        </script>
    </body>
</html>
